<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>K米蹦笨跳管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <style>
        #refresh {
            float:left;
            margin-top: 30px;
            margin-left: 350px;
        }

        #app {
            margin-left: 450px;
            border-collapse:collapse;
        }
        th,td {
            border: 1px solid black;
            padding: 7px 30px;
        }
        td {
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="refresh">刷新数据</button>

    <table id="app">
        <thead>
            <th>房间号</th>
            <th>玩家1</th>
            <th>玩家2</th>
            <th>状态</th>
            <th>模式</th>
        </thead>
        <tbody>
            <tr>
                <td colspan=4>data.msg</td>
            </tr>
        </tbody>
    </table>
</body>

<script type="text/javascript" src="/static/common/js/jquery.min.js"></script>
<script>
    setInterval(function(){
        getAllRoom();
    },60 * 1000);


    function getAllRoom() {
        $.ajax({
            url: "/index/bengben/ajaxGetAllRoom",
            dataType: "JSON",
            success: function(data){
                var html = "";
                if (data.error != 0) {
                    html = "<tr>" +
                        "<td colspan=5>"+data.msg+"</td>" +
                        "</tr>";
                    console.log(html);
                    $('#app tbody').html(html);
                }

                for (var i in data.list) {
                    var room = data.list[i];
                    html += "<tr>";
                    html +=     "<td>"+room.roomid+"</td>";
                    html +=     "<td>"+room.player1+"</td>";
                    html +=     "<td>"+room.player2+"</td>";
                    html +=     "<td>"+room.gameStatus+"</td>";
                    html +=     "<td>"+room.isRand+"</td>";
                    html += "</tr>";
                }
                $('#app tbody').html(html);
            }
        })
    }
    getAllRoom();
</script>